<template>
    <section class="search" v-show='dialogShowIf'>
      <i @click.stop='$emit("update:dialogShowIf", false)' class="el-dialog__close el-icon el-icon-close"></i>
      <p>
        
        <el-input
          v-model.trim='searchValue'
          @keyup.enter.native.stop = 'search'
          placeholder="请输入8位员工编号或姓名查询"
          style='width:230px'/>
        <el-button class="search-button" @click='search'>搜索</el-button>
      </p>


        <el-table max-height='370' :data="gridData">
          <el-table-column property="emplid" label="员工编号" width="100"/>
          <el-table-column property="name" label="员工名称" width="100"/>
          <el-table-column property="setid" label="二级公司ID" width="110"/>
          <el-table-column property="deptid" label="部门ID" width="100"/>
          <el-table-column property="dept_descr" label="部门名称" min-width="120"/>
          <el-table-column
            label="操作"
            align="center"
          >
            <template scope="scope">
                <el-tag
                  style='cursor:pointer'
                  type="success"
                  @click.stop.native ='save(scope.row)'
                >选择</el-tag>
              </template>
            </el-table-column>
        </el-table>


      <div class="fenye">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page.num"
          :page-size="page.size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </section>

</template>

<script>
import Vue from 'vue'
import Axios from 'axios'
import { Loading, Message, MessageBox } from 'element-ui'
Vue.use(Loading)

export default {
  data () {
    return {
      gridData: [],
      searchValue: '',
      page: {
        size: 10,
        num: 1,
        total: 0
      }
    }
  },
  props: {

    dialogShowIf: {
      type: Boolean,
      default: false
    }

  },

  watch: {
    dialogShowIf (newValue) {
      if (newValue === true && !this.gridData.length) {

        this.serachValue = ''
        this.search()
      }
    }
  },




  methods: {

    save (row) {

      const { emplid, name } = row

      this.$emit('update:dialogShowIf', false)
      this.$emit('getNameAndID', { emplid, name })

    },

    search () {

      let params = {
        pageNum: this.page.num,
        pageSize: 10,
        search: this.searchValue,
        token: localStorage.getItem('token')
      }

      const loding = Loading.service({
        target: document.querySelector('.contentBox'),
        text: '加载中'
      })

      Axios
        .post(this.Axios.baseURI + '/workFlowProcessNodeConfAssignee/getUserBySearch', params)
        .then((res) => {
          this.gridData = res.data.datas
          res.data.page && (this.page.total = res.data.page.total)
          loding.close()
        })
    },
    handleCurrentChange (val) {
      this.page.num = val
      this.search()
    },


    // getTableData () {

    //   const params = {
    //     pageNum: 1,
    //     pageSize: 300,
    //     search: this.serachValue
    //   }

    //   this.Axios
    //     .Post('/reportSearch/getDeptList', params)
    //     .then((res) => {
    //       const data = res.data.datas
    //       this.tableData = data
    //     })

    // },

    handleClose () {
      this.$emit('update:dialogShowIf', false)
    }
  },




}
</script>


<style scoped lang='less'>
.search {
  width: 680px;
  position: relative;
  left: 50%;
  top: 15px;
  padding: 15px 15px 5px 15px;
  border-radius: 4px;
  transform: translateX(-60%);
  background-color: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.156863),
    0 1px 6px rgba(0, 0, 0, 0.227451);
  margin-bottom: 5px;
  & > p {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 20px;
  }

  .fenye {
    margin: 15px 0 0 -10px;
  }

  .el-dialog__close {
    position: absolute;
    cursor: pointer;
    right: 17px;
    top: 15px;
  }
}
</style>


<style lang='less'>
.classID {
  text-align: center;
  color: #56aadd;
  margin-top: -12px;
  margin-bottom: 12px;
  font-size: 15px;
}

.searchdxa {
  text-align: center;
  h4 {
    padding: 15px 0;
    color: rgb(195, 200, 200);
    font-size: 12px;
    font-weight: normal;
  }
}
</style>